<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>幸运嗨购</title>
		<link rel="stylesheet" href="./css/ydui.rem.css" />
		<link rel="stylesheet" href="./css/haigou.css" />
		<link rel="Shortcut Icon" href="./img/favicon-20191231054058871.ico" type="image/x-icon" />
	</head>
	<body>
		<div id="app">
			<div class="raffle">
				<div class="middle">
					<div class="probability">
						<p class="pro-title">欢迎来到嗨购幸运抽奖</p>
						<div class="price">
							<select v-model="value" class="choose">
								<option v-for="itempt in options" :key="itempt.value" :label="itempt.label" :value="itempt.value"></option>
							</select>
						</div>
						<div class="goods">
							<p class="corners"></p>
							<p class="corners-right"></p>
							<div class="chongs">
								<div class="goods-img">
									<img src="./img/oRIZ5kUab2gKOiVULRUtaQ.jpg" />
								</div>
								<p class="titles">
									抽奖价：￥{{Lottery}}
									<!-- <span class="ziti">￥{{price}}</span> -->
								</p>
							</div>
						</div>
					</div>
					<p class="p-title">采用绝对公平公开的算法</p>
					<p class="atonce" @click="Shake">马上嗨一把</p>
				</div>
			</div>
		</div>
		<!-- 引入 Vue -->
		<script src="./js/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="./js/ydui.rem.js"></script>
		<!-- 引入rem自适应类库 -->
		<script src="./js/ydui.flexible.js"></script>
		<script src="./js/axios.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						options: [{
								value: "1",
								label: "1元嗨"
							},
							{
								value: "2",
								label: "2元嗨"
							},
							{
								value: "3",
								label: "3元嗨"
							}
						],
						Lottery: "1.27", // 抽奖价格
						ordercode: "JJF787FDDFD", // 订单号
						price: "1.50", // 原价格
						number: "" // 产生的随机数（小数点后三位）
					}
				},
				methods: {
					// 点击抽奖事件
					Shake() {
						// window.location.href = "/m/index/shake.html";
						axios({
								url: "http://shop.jjftec.com/index.php/api/index/add_huan",
								method: "post",
								timeout: 50000,
								data: {
									sn: this.ordercode
								}
							})
							.then(res => {
								console.log("请求成功" + JSON.stringify(res));
								if (res.data.code == "3") {
									this.$dialog.toast({
										mes: res.data.msg,
										timeout: 1500,
										icon: 'error',
						
									});
								}
							})
							.catch(e => {
								console.log("请求失败" + e);
							});
					},
					priceas() {
						var max = 1.1;
						var min = 0.9;
						var random = Math.random() * (max - min) + min;
						var temp = Number(random);
						temp = Math.floor(temp * 1000) / 1000;
						this.number = temp.toFixed(3); // 取小数点后三位
					}
				},
				created() {
					this.value = this.options[0].value;
				},
				mounted() {
					this.priceas();
					console.log(this.number)
					var price = (this.options[0].value) * this.number;
					this.Lottery = price.toFixed(2); // 最终价格进行四舍五入
				}
			})
		</script>
	</body>
</html>
